<template>
	<view class="min-h-full p-8 static">
		<!-- <view class="flex flex-row flex-wrap rounded-lg bg-white" style="min-height: 80vh;">
			<view class="w-full p-22 text-14" style="color: #5E5E5E;">
				<view class="text-bold text-18 bottom-line pt-10 pb-15">{{detail.task.name}}</view>
				<view class="bottom-line pt-12 pb-12"><text class="text-bold">订单类型：</text><text class="theme-color">{{detail.task.category.name}}</text></view>
				<view v-if='detail.task.category_id==1' class="bottom-line pt-12 pb-12"><text class="text-bold">货物种类：</text>{{detail.task.transport_type}}</view>
				<view v-if='detail.task.category_id==1' class="bottom-line pt-12 pb-12"><text class="text-bold">运输场景：</text>{{detail.task.transport_scene}}</view>
				<view v-if='detail.task.category_id==1' class="bottom-line pt-12 pb-12"><text class="text-bold">货运距离：</text>{{detail.task.transport_distance}}</view>
				<view v-if='detail.task.category_id==1' class="bottom-line pt-12 pb-12"><text class="text-bold">货物重量：</text>{{detail.task.weight}} 吨</view>
				<view v-if='detail.task.category_id==1' class="bottom-line pt-12 pb-12"><text class="text-bold">开始时间：</text>{{detail.task.start_at}}</view>
				<view v-if='detail.task.category_id==1' class="bottom-line pt-12 pb-12"><text class="text-bold">结束时间：</text>{{detail.task.end_at}}</view>
				<view v-if='detail.task.category_id!=1' class="bottom-line pt-12 pb-12"><text class="text-bold">订单时间：</text>{{detail.task.exec_at}}</view>
				<view v-if='detail.task.category_id!=1'class="bottom-line pt-12 pb-12 flex flex-row align-items-center"><text class="text-bold">订单地址：</text>
					<view class="flex-1">{{detail.task.place}}</view>
					<image style="width: 46rpx; height: 46rpx;" src="/static/addr.png" @tap="openMap"></image>
				</view>
				<view v-if='detail.task.category_id==1'class="bottom-line pt-12 pb-12 flex flex-row align-items-center"><text class="text-bold">起飞地址：</text>
					<view class="flex-1">{{detail.task.place}}</view>
					<image style="width: 46rpx; height: 46rpx;" src="/static/addr.png" @tap="openMap"></image>
				</view>
				<view v-if='detail.task.category_id==1'class="bottom-line pt-12 pb-12 flex flex-row align-items-center"><text class="text-bold">送达地址：</text>
					<view class="flex-1">{{detail.task.place2}}</view>
					<image style="width: 46rpx; height: 46rpx;" src="/static/addr.png" @tap="openMap2"></image>
				</view>
				<view class="bottom-line pt-12 pb-12"><text class="text-bold">订单报酬：</text>￥{{detail.task.money}}</view>
				<view class="bottom-line pt-12 pb-12"> 
					<view class="text-bold pb-5">订单描述：</view>
					<view style="line-height: 1.25rem;white-space: pre-wrap;">{{detail.task.desc}}</view>
				</view>
				<view class="pt-12 pb-12">
					<view class="text-bold pb-5">订单要求：</view>
					<view style="line-height: 1.25rem;white-space: pre-wrap;">{{detail.task.require}}</view>
				</view>
			</view>
			
			<view v-if="detail.status == 0" class="text-center pb-10 pt-10" style="margin: auto;">
				<image class="" src="@/static/confirm-btn.jpg" style="width: 300rpx; height:85rpx"  @tap="complete"></image>
			</view>
		</view> -->
		
		<view class="flex flex-row flex-wrap rounded-lg bg-white" style="box-shadow: 0 0 8px 0px rgba(0,0,0,0.3)">
			<view class="w-full px-20 py-15 text-14" style="color: #5E5E5E;">
				<!-- <view class="text-bold text-18  pt-2 ">{{detail.name}}</view> -->
				<view class="flex flex-row align-items-center">
					<text class="">货物种类：</text>
					<text class="text-black flex-1 text-right">{{detail.task.transport_type}} {{detail.task.transport_type=='其他' && detail.task.transport_type_other ? '['+detail.task.transport_type_other+']':''}}</text>
				</view>
				<view class=" pt-12 flex flex-row align-items-center">
					<text class="">货运场景：</text>
					<text class="text-black flex-1 text-right">{{detail.task.transport_scene}}  {{detail.task.transport_scene=='其他' && detail.task.transport_scene_other ? '['+detail.task.transport_scene_other+']':''}}</text>
				</view>
				<view class=" pt-12 flex flex-row align-items-center">
					<text class="">运输距离：</text>
					<text class="text-black flex-1 text-right">{{detail.task.transport_distance}}</text>
				</view>
				<view class=" pt-12 flex flex-row align-items-center">
					<text class="">预估重量：</text>
					<text class="text-black flex-1 text-right">{{detail.task.weight}} 吨</text>
				</view>
			</view>
		</view>
		
		<view class="flex flex-row flex-wrap rounded-lg bg-white mt-15" style="box-shadow: 0 0 8px 0px rgba(0,0,0,0.3)">
			<view class="w-full px-20 py-15 text-14" style="color: #5E5E5E;">
				<view class="  flex flex-row align-items-center">
					<text class="">上门时间：</text>
					<text class="text-black flex-1 text-right">{{detail.task.exec_at}}</text>
				</view>
				<!-- <view class=" pt-12 "><text class="">结束时间：</text><text class="text-bold">{{detail.transport.end_at}}</text></view> -->
			</view>
		</view>
		<view class="flex flex-row flex-wrap rounded-lg bg-white mt-15" style="box-shadow: 0 0 8px 0px rgba(0,0,0,0.3); ">
			<view class="w-full px-20 py-15 text-14" style="color: #5E5E5E;">
				<view class="flex flex-row align-items-center" style="width: 645rpx">
					<text class="flex-shrink-0">任务地址：</text>
					<view class="flex-1 text-right text-black ellipsis" >{{detail.task.place}}</view>
					<image class="flex-shrink-0 ml-5" style="width: 40rpx; height: 40rpx;" src="/static/address-orange.png" @tap="openMap"></image>
				</view>
			<!-- 	<view class=" pt-12  flex flex-row align-items-center"><text class="text-bold">送达地址：</text>
					<view class="flex-1">{{detail.transport.place2}}</view>
					<image style="width: 46rpx; height: 46rpx;" src="/static/address-blue.png" @tap="openMap2"></image>
				</view> -->
			</view>
		</view>
		
		<view class="flex flex-row flex-wrap rounded-lg bg-white mt-15" style="box-shadow: 0 0 8px 0px rgba(0,0,0,0.3)">
			<view class="w-full px-20 py-15 text-14" style="color: #5E5E5E;">
				<!-- <view class="  ">
					<view class="text-bold pb-5">订单描述：</view>
					<view style="line-height: 1.25rem; white-space: pre-wrap;">{{detail.desc}}</view>
				</view> -->
				<view class=" ">
					<view class=" pb-5">订单要求：</view>
					<view class="text-black" style="line-height: 1.25rem; white-space: pre-wrap;" >
						{{detail.task.require}}
					</view>
				</view>
			</view>
		</view>
		<view class="flex flex-row flex-wrap rounded-lg bg-white mt-15" style="box-shadow: 0 0 8px 0px rgba(0,0,0,0.3)">
			<view class="w-full px-20 py-15 text-14" style="color: #5E5E5E;">
				<view class=" flex flex-row align-items-center ">
					<text class="">预估价格：</text>
					<text class="text-bold flex-1 text-right" style="color: #F69D04;">{{detail.task.money}} 元</text>
				</view> 
			</view>
		</view>
		
		<view v-if="detail.status == 0" class="text-center pb-10 pt-20" style="margin: auto;">
			<image class="" src="@/static/confirm-btn.jpg" style="width: 300rpx; height:85rpx"  @tap="complete"></image>
		</view>
	</view>
</template>

<script>
	import request from '/utils/request.js';
	export default {
		data() {
			return {
				id: '',
				detail: {
					task: {
						category: {}
					}
				},
			}
		},
		onLoad(options) {
			this.id = options.id;
			this.getOrderDetail();
		},
		onShareAppMessage() {
			return {
			  title: '飞兔接单',
			  path: '/pages/task/list',
			  // imageUrl : ''
			}
		},
		onShareTimeline() {
			return {
			  title: '飞兔接单',
			  // query: '',
			  // imageUrl : ''
			}
		},
		methods: {
			// 获取订单详情
			getOrderDetail(){
				request.post('/pilot/orderDetail', {
					id: this.id
				}).then(res=>{
					this.detail = res;
				})
			},
			// 订单订单完成
			complete(){
				// uni.showModal({
				// 	title: '确认完成',
				// 	content: '请在指定时间完成订单任务',
				// 	success: function (res) {
				// 		if (res.confirm) {
							
				// 		} else if (res.cancel) {
							
				// 		}
				// 	}
				// });
				request.post('/pilot/orderComplete', {
					id: this.id
				}).then(res=>{
					uni.showToast({
						title: '提交成功，等待审核',
						icon: 'none'
					})	
					setTimeout(()=>{
						uni.navigateTo({url: '/pages/user/order'})  
					}, 1000)
				})
			},
			openMap(){
				var that = this;
				wx.openLocation({
					latitude: Number(that.detail.task.lat),
					longitude: Number(that.detail.task.lng),
					// scale: '',
					success(res){
						console.log('openLocation,success', res)
					},
					fail(err){
						console.log('openLocation,fail', err)
					}
				})
			},
			openMap2(){
				var that = this;
				wx.openLocation({
					latitude: Number(that.detail.task.lat2),
					longitude: Number(that.detail.task.lng2),
					// scale: '',
					success(res){
						console.log('openLocation,success', res)
					},
					fail(err){
						console.log('openLocation,fail', err)
					}
				})
			}
		}
	}
</script>

<style>
	page{
		background-color: #FFF8F5;
	}
	.bottom-line{
		border-bottom: 1px solid #bbb;
	}
</style>
